<script setup>
import {ref} from "vue";
import {getProductList, onTimeProduct} from "@/api/product";
import dayjs from "dayjs";
import {formatAmount} from "@/utils/format";

const time = ref([dayjs(new Date().setFullYear(new Date().getFullYear() - 4)).format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])
const ruleForm = ref({
 vt_symbol: 'RB',
 start: time.value[0],
 end: time.value[1],
})

const onTime = (e) => {
 ruleForm.value.start = e[0]
 ruleForm.value.end = e[1]
 getProduct()
}

const active = ref(0)

// 商品列表
const productList = ref([])

// 策略列表
const strategyList = ref([])

const getProduct = () => {
 Promise.try(() => {
  return onTimeProduct(ruleForm.value)
 }).then(res => {
  productList.value = res.data
 })
}
getProduct()


const product = ref([])
const getAllProduct = () => {
 Promise.try(() => {
  return getProductList()
 }).then(res => {
  res.data.forEach(item => {
   item.annual_return = formatAmount(item.annual_return)
  })
  product.value = res.data
 })
}
getAllProduct()

// 商品选择
const onProductChange = (e) => {
 console.log(e)
 // ruleForm.value.vt_symbol = e
 getProduct()
}

// 禁选日期
const disabledDate = (current) => {
 // 获取当前日期并设置时间为00:00:00
 const today = new Date();
 today.setHours(0, 0, 0, 0);  // 清除时间部分，保持日期部分

 // current 是一个原生 Date 对象，比较其时间戳
 return current && current.getTime() > today.getTime(); // 禁用今天及以后的日期
};
</script>

<template>
 <div class="card">
  <div class="card_header flex">
   <h6 class="card_header_title">回测</h6>
  </div>

  <div class="card_main flex">
   <div class="card_form flex">
    <label>回测时间段</label>

    <el-date-picker
     v-model="time"
     type="daterange"
     range-separator="至"
     start-placeholder="开始日期"
     :clearable="false"
     @change="onTime"
     :disabled-date="disabledDate"
     value-format="YYYY-MM-DD"
     end-placeholder="结束日期">
    </el-date-picker>
   </div>

   <div class="tags flex">
    <el-dropdown @command="onProductChange">
     <el-button type="primary" class="el-dropdown-link">
      商品<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
     </el-button>
     <template #dropdown>
      <el-dropdown-menu>
       <el-dropdown-item v-for="item of product" :key="item.id" :command="item.product_code">{{ item.product_name }}</el-dropdown-item>
      </el-dropdown-menu>
     </template>
    </el-dropdown>
    <el-button type="primary" size="small">全部</el-button>
   </div>

   <div class="table">
    <el-table :data="productList">
     <el-table-column label="策略" min-width="53" prop="vt_symbol" show-overflow-tooltip></el-table-column>
     <el-table-column label="买入价" min-width="53" prop="xxx" show-overflow-tooltip></el-table-column>
     <el-table-column label="最新" min-width="53" prop="latest_price" show-overflow-tooltip></el-table-column>
     <el-table-column label="收益率" min-width="53" prop="annual_return" show-overflow-tooltip>
      <template #default="{row}">
       <el-link type="success" v-if="+row.increase_rate > 0">{{ row.annual_return }}%</el-link>
       <el-link type="info" v-if="+row.increase_rate === 0">{{ row.annual_return }}%</el-link>
       <el-link type="danger" v-if="+row.increase_rate < 0">{{ row.annual_return }}%</el-link>
      </template>
     </el-table-column>
     <el-table-column label="操作" width="55">
      <template v-slot="{row}">
       <span style="color: #1056f2; cursor: pointer" @click="$refs.product.handleOpen(row.id)">详情</span>
      </template>
     </el-table-column>
    </el-table>
   </div>
  </div>
 </div>
</template>

<style scoped lang="scss">
.card_main {
 margin-top: 20px;
 flex-direction: column;

 .card_form {
  flex-direction: column;
  label {
   margin-bottom: 10px;
   @include Font((color: $colorA, size: 14px));
  }

  ::v-deep {
   .el-date-editor {
    width: 250px;
    background-color: transparent;
    box-shadow: 0 0 0 1px $card_border_color inset;
   }

   .el-range-separator {
    @include Font((color: $colorA));
   }

   .el-range-input {
    color: $white;
   }
  }
 }

 .tags {
  margin: 30px 0 10px;

  .el-dropdown {
   outline: none;
   display: flex;
   flex: 1;
   height: 25px;

   >.el-button {
    border-radius: 40px 0 0 40px;
   }
  }

  .el-button {
   flex: 1;
   height: 25px;
  }

  >.el-button {
   border-radius: 0 40px 40px 0;
  }
 }
}

.el-table {
 background-color: transparent;
 ::v-deep {
  .el-table__inner-wrapper {
   &:before {
    display: none;
   }
  }
  th,tr {
   background-color: transparent;
  }

  .el-table__header-wrapper {
   th {
    border-bottom-color: $card_border_color;
   }
   .cell {
    padding: 0 6px;
    @include Font((color: $colorA, size: 14px));
   }
  }
 }
}
</style>